<template>
  <div class="box">
    <header class="header">
      <!--搜索组件-->
      <van-search
        v-model="value"
        show-action
        placeholder="iphone16"
        @search="onSearch"
        @update:model-value="onUpdate"
        @click="show"
      >
        <template #left>
          <!--点击左箭头 退回-->
          <van-icon name="arrow-left" size="20" @click="$router.back()" />
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </header>
    <main class="main">
    <div class="shop"  v-show="isShow">
  <div class="history">
        <p>历史记录</p>
        <p><van-icon name="delete-o" /></p>
      </div>
      <ul class="tag">
        <li>皮带</li>
        <li>aj女鞋</li>
      </ul>
      <div class="imging">
        <p>猜你想搜</p>
        <p>换一换<van-icon name="replay" /></p>
      </div>
      <ul class="tag2">
        <li>皮带</li>
        <li>小白鞋</li>
        <li>aj女鞋</li>
        <li>内科</li>
        <li>皮带</li>
        <li>小白鞋</li>
      </ul>
      <div class="bgimg">
          <b>热搜索</b>
          <img src="../../img/5.jpg" alt="">
      </div>

      </div>
      <div class="pro" v-show="!isShow">
        <!--通过if-else控制是否展示列表或空结果-->
      <!--空状态时-->
      <van-empty image="search" :description="'暂无搜到'+value+'该商品'" v-if="list.length==0" />
      <!--列表商品数据-->
      <div v-for="item in list" :key="item.id" v-else>
         <!--商品卡片-->
        <van-card
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
        />
      </div>
    </div>
    </main>
  
  </div>

  
</template>


<script setup>
import { ref, onMounted } from "vue";
//引入request请求
import request from "@/utils/request";
const value= ref('')
const list = ref([])
//请求列表数据
const query=()=>{
    request.get('/search',{
        params:{
            value:value.value
        }
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data
        }
    })
}

//搜索数据
const onSearch=()=>{
    query()
}
//联想搜索
const onUpdate=()=>{
    query()
}
//通过v-show控制 搜索页面和列表页面的展示
const isShow = ref(true)
const show =()=>{
    isShow.value=false
}

</script>



<style lang="scss" scoped>

.main {
     font-size: 12px;
 
}
.shop{
     display: flex;
  flex-direction: column;
}
.history {
  display: flex;
  justify-content: space-between;
}
.tag {
  li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 5px;
    text-align: center;
    background: #f5f4f9;
  }
}
.imging {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.tag2 {
  li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    background: #f5f4f9;
  }
}

.bgimg{
    margin-top: 10px;
    img{
        width: 100%;
    }
}

</style>